<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 插值表达式和v-bind数据绑定    
         v-html v-once v-bind
    </title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    <div id="app"></div>
</body>
<script> 
   const app =  Vue.createApp({
        data(){
            return{
                message:"收购阿里"
            }
        },
        methods:{
            handleClick(){
                this.message = this.message == "收购阿里"?"常东东":"nice"
            }
        },
        template:"<h1 v-on:click='handleClick'> {{message}}</h1>"

    })
    const vm = app.mount("#app")
    /*
       字面量 正确叫法叫 插值表达式 也就时我们常看到的{{XXXXX}}这个鬼 
    在template模板属性中 的{{message}} 即是插值表达式 
    就是说理用这种形式 可以使data中的变量 展示在模板中 


    //插值表达式输出 html标签 v-html指令 
    //想在变量里 编写html的标签 然后输出在页面上 有问题 h5标签也会输出来的
    // return{
        message :'收购腾讯'
        }
    /这时候啥也不做 直接输出 不是我们想要的 
        <i>收购腾讯</i>
    /使用v-html 解决这个问题 
        template: `<h2 v-html="message"> </h2>`    
    /再次预览 斜体的 收购腾讯 


    /插值表达式中是可以使用JS表达式的
        {{count>2?"大":"小"}}
    /在data中新声明一个变量count，用三元运算符判断是否是大于2，如果大于2显示大，小于2显示小
    /当然也包括 简便的操作 
        <div>{{'jspang'+'.com'}}</div>
        <div>{{1+2}}</div>


    
    v-bind指令使用 ？
        给h2标签加入一个title属性，属性的值也想使用message
        <h2 
        v-on:click="handleItemClick" 
        v-html="message"
        v-once
        title="message"   //想输出 message 变量值 
        > </h2>`    
        //v-bind:title="message"  绑定一下即可 

        v-on:  @简写
        v-bind :简写   鼓励简写 代码更加清晰 
         */


        //阻止默认事件 
       /* methods:{
            hanldeClick(){
                alert('欢迎光临红浪漫')
            },
            hanldeButton(e){
                e.preventDefault()    //阻止默认事件的 
            }
        },
        //...
        template:`
            //....
        <form action="https://jspang.com" @click="hanldeButton">
            <button type="submit">默认提交</button>
        </form>
        ` */    //下面是简写的方法 
        /*<form 
            action="https://jspang.com" 
            @click.prevent="hanldeButton">   //简写 
            <button type="submit">默认提交</button>
        </form>*/    


</script>

</html>